<template>
  <div>
    <Row>
      <i-col :xs="24" :sm="8" :md="8" :lg="8">
        <Card>
          <p slot="title">
            <Icon type="stats-bars"></Icon>
            代理机构
          </p>
          <div slot="extra">
            <a href="javascript:void(0)" style="margin-right: 10px">模板下载</a>
            <Button size="small" type="primary">导入账号</Button>
          </div>
          <div style="min-height: 80vh;">
            <div>
              <Input search placeholder="搜索代理机构" />
            </div>
            <Tree @on-select-change="selectChange" :data="tree"></Tree>
          </div>
        </Card>
      </i-col>
      <i-col v-if="current" :xs="24" :sm="16" :md="16" :lg="16" style="padding-left: 12px;">
        <Card>
          <p slot="title">
            <Icon type="stats-bars"></Icon>
            {{current.title}}·支付账号
          </p>
          <div style="min-height: 80vh;">
            <Row>
              <i-col :xs="24" :sm="24" :md="24" :lg="12" v-for="item in current.banks" :key="item.bankCode">
                <bank-card :info="item"></bank-card>
              </i-col>
            </Row>
          </div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import tree from '../tree.js'
  import bankCard from './tool/bankCard'
  export default {
    components:{
      'bank-card': bankCard
    },
    name: "index",
    data() {
      return {
        current: null,
        tree: tree
      }
    },
    methods: {
      selectChange(e) {
        this.current = e[0]
      }
    }
  }
</script>

<style scoped lang="less">

</style>
